<template>
  <div class="app-container">
    <el-card>
      <div class="expert-title-outBox">
        <div class="expert-title">专家库/详情</div>
        <div class="back-btn" @click="handBack" v-if="isShowBtn">
          <img src="@/assets/images/tripartite/back_button.png" alt="" />返回
        </div>
      </div>
      <!-- 基本信息 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>基本信息</span>
        </div>
        <el-descriptions border :column="3">
          <el-descriptions-item
            label="专家姓名"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.expertName }}</el-descriptions-item
          >
          <el-descriptions-item
            label="性别"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.sex==='0'?"男":queryParams.sex==='1'?'女':'' }}</el-descriptions-item
          >
          <el-descriptions-item
            label="政治面貌"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.politicalOutlook==='0'?'群众':queryParams.politicalOutlook==='1'?'党员':'' }}</el-descriptions-item
          >
          <el-descriptions-item
            label="身份证号码"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.idNumber }}</el-descriptions-item
          >
          <el-descriptions-item
            label="年龄"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.age }}</el-descriptions-item
          >
          <el-descriptions-item
            label="手机号码"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.phoneNumber }}</el-descriptions-item
          >
          <el-descriptions-item
            label="电子邮箱"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.email }}</el-descriptions-item
          >
          <el-descriptions-item
            label="联系地址"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.contactAddress }}</el-descriptions-item
          >
          <el-descriptions-item
            label="录入时间"
            label-class-name="descriptions-item-label"
            content-class-name="descriptions-item-content"
            >{{ queryParams.createTime }}</el-descriptions-item
          >
        </el-descriptions>
      </div>
      <!-- 学历信息 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>学历信息</span>
        </div>
        <el-descriptions border :column="2">
          <el-descriptions-item label="毕业学院" label-class-name="descriptions-item-label" content-class-name="descriptions-content-width">{{
            queryParams.graduateCollege
          }}</el-descriptions-item>
          <el-descriptions-item label="专业" label-class-name="descriptions-item-label">{{
            queryParams.major ==1?'计算机科学与技术':queryParams.major ==2?'通信技术':queryParams.major ==3?'AI人工智能':queryParams.major
          }}</el-descriptions-item>
          <el-descriptions-item label="学历" label-class-name="descriptions-item-label" content-class-name="descriptions-content-width">{{
            queryParams.education=='0'?'博士':queryParams.education=='1'?'硕士':queryParams.education=='2'?'本科':queryParams.education=='3'?'大专':''
          }}</el-descriptions-item>
          <el-descriptions-item label="毕业时间" label-class-name="descriptions-item-label">{{
            formatDate(queryParams.graduationTime)
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 单位信息 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>单位信息</span>
        </div>
        <el-descriptions border :column="2">
          <el-descriptions-item label="工作单位" label-class-name="descriptions-item-label" content-class-name="descriptions-content-width">{{
            queryParams.workUnit
          }}</el-descriptions-item>
          <el-descriptions-item label="职务" label-class-name="descriptions-item-label">{{
            queryParams.post
          }}</el-descriptions-item>
          <el-descriptions-item label="擅长领域" label-class-name="descriptions-item-label" content-class-name="descriptions-content-width">{{
            queryParams.areasOfExpertise=='0'?'土木工程'
            :queryParams.areasOfExpertise=='1'?'财政'
            :queryParams.areasOfExpertise=='2'?'环境保护'
            :queryParams.areasOfExpertise=='3'?'计算机技术'
            :queryParams.areasOfExpertise=='4'?'机械工程'
            :''
          }}</el-descriptions-item>
          <el-descriptions-item label="工作年限" label-class-name="descriptions-item-label">
            <span v-if="queryParams.workingYears">{{ queryParams.workingYears + '年'}}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 技术职称 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>技术职称</span>
        </div>
        <el-table :data="technicalTitles" border>
          <el-table-column label="职称名称" align="center" prop="jobTitle">
            <template slot-scope="scope">
              <span>{{ scope.row.jobTitle==='1'?'高工':scope.row.jobTitle==='2'?'教授':scope.row.jobTitle==='3'?'副教授':'' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="通过时间" align="center" prop="passingTime">
            <template slot-scope="scope">
              <span>{{ formatDate(scope.row.passingTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="截止时间" align="center" prop="deadline">
            <template slot-scope="scope">
              <span>{{ formatDate(scope.row.deadline) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="附件" align="center" prop="technicalFileDoc">
            <template slot-scope="scope">
              <span
                class="pointer blueColor"
                @click="$download(scope.row.technicalFileDoc?scope.row.technicalFileDoc.fileUrl:'')"
                ><img
                    src="@/assets/images/tripartite/icon_files.png"
                    v-show="scope.row.technicalFileDoc&&scope.row.technicalFileDoc.fileName"
                />{{scope.row.technicalFileDoc&&scope.row.technicalFileDoc.fileName?scope.row.technicalFileDoc.fileName:''}}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 职业资格 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>职业资格</span>
        </div>
        <el-table :data="qualifications" border>
          <el-table-column label="资格名称" align="center" prop="qualificationName">
            <template slot-scope="scope">
             <span>{{
                  scope.row.qualificationName==='1'?'职业经理人'
                  :scope.row.qualificationName==='2'?'人力资源管理师'
                  :scope.row.qualificationName==='3'?'建筑材料员'
                  :scope.row.qualificationName==='4'?'企业法律顾问'
                  :''
                }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="资格证书号"
            align="center"
            prop="qcNo"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="注册单位"
            align="center"
            prop="registeredUnit"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="注册时间" align="center" prop="registrationTime">
            <template slot-scope="scope">
              <span>{{ formatDate(scope.row.registrationTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="过期时间" align="center" prop="expirationTime">
            <template slot-scope="scope">
              <span>{{ formatDate(scope.row.expirationTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="附件" align="center" prop="qualificationFileDoc">
            <template slot-scope="scope">
              <span
                class="pointer blueColor"
                @click="$download(scope.row.qualificationFileDoc?scope.row.qualificationFileDoc.fileUrl:'')"
                ><img
                    src="@/assets/images/tripartite/icon_files.png"
                    v-show="scope.row.qualificationFileDoc&&scope.row.qualificationFileDoc.fileName"
                />{{scope.row.qualificationFileDoc&&scope.row.qualificationFileDoc.fileName?scope.row.qualificationFileDoc.fileName:''}}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 其他附件 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>其他附件</span>
        </div>
        <el-descriptions border :column="2">
          <el-descriptions-item label="最高学历证书">
            <span
              class="pointer blueColor"
              @click="$download(queryParams.haCertificateFileDoc?queryParams.haCertificateFileDoc.fileUrl:'')"
              ><img
                  src="@/assets/images/tripartite/icon_files.png"
                  v-show="queryParams.haCertificateFileDoc&&queryParams.haCertificateFileDoc.fileName"
              />{{queryParams.haCertificateFileDoc&&queryParams.haCertificateFileDoc.fileName?queryParams.haCertificateFileDoc.fileName:''}}
            </span>
            </el-descriptions-item
          >
          <el-descriptions-item label="工作单位意见">
            <span
              class="pointer blueColor"
              @click="$download(queryParams.workUnitOpinionsFileDoc?queryParams.workUnitOpinionsFileDoc.fileUrl:'')"
              ><img
                  src="@/assets/images/tripartite/icon_files.png"
                  v-show="queryParams.workUnitOpinionsFileDoc&&queryParams.workUnitOpinionsFileDoc.fileName"
              />{{queryParams.workUnitOpinionsFileDoc&&queryParams.workUnitOpinionsFileDoc.fileName?queryParams.workUnitOpinionsFileDoc.fileName:''}}
            </span>
            </el-descriptions-item
          >
          <el-descriptions-item label="身份证">
            <span
              class="pointer blueColor"
              @click="$download(queryParams.idCardFileDoc?queryParams.idCardFileDoc.fileUrl:'')"
              ><img
                  src="@/assets/images/tripartite/icon_files.png"
                  v-show="queryParams.idCardFileDoc&&queryParams.idCardFileDoc.fileName"
              />{{queryParams.idCardFileDoc&&queryParams.idCardFileDoc.fileName?queryParams.idCardFileDoc.fileName:''}}
            </span>
          </el-descriptions-item
          >
          <el-descriptions-item label="个人照片">
            <span
              class="pointer blueColor"
              @click="$download(queryParams.personalPhotosFileDoc?queryParams.personalPhotosFileDoc.fileUrl:'')"
              ><img
                  src="@/assets/images/tripartite/icon_files.png"
                  v-show="queryParams.personalPhotosFileDoc&&queryParams.personalPhotosFileDoc.fileName"
              />{{queryParams.personalPhotosFileDoc&&queryParams.personalPhotosFileDoc.fileName?queryParams.personalPhotosFileDoc.fileName:''}}
            </span>            
            </el-descriptions-item
          >
        </el-descriptions>
      </div>
      <!-- 评审任务 -->
      <div class="expert-container">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png" />
          <span>评审任务</span>
        </div>
        <el-table :data="expertMessageVoList" border max-height="500px">
          <el-table-column label="任务名称" 
            align="center" 
            prop="taskName" 
            :show-overflow-tooltip="true"
          />
          <!-- <el-table-column
            label="评审时间"
            align="center"
            prop="reviewTimeStart"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{scope.row.reviewTimeStart + ` - ` + scope.row.reviewTimeEnd}}
            </template>
          </el-table-column> -->
          <el-table-column
            label="评审地点"
            align="center"
            prop="reviewAddress"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="averageScore"
            align="center"
            prop="totalScore"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getExpert ,getExpertId} from "@/api/tripartite/expert";
export default {
  data() {
    return {
      // 弹出层标题
      title: "",
      // 表单参数
      queryParams: {},
      //技术职称列表
      technicalTitles: [],
      //职业资格列表
      qualifications:[],
      // 评审任务列表
      expertMessageVoList:[],
      // 专家id
      expertId:undefined,
      // 判断返回按钮的显隐
      isShowBtn:true,
      // 任务得分平均分
      averageScore:'任务得分'
    };
  },
  created() {
    const expertId = this.$route.query.expertId;
    if(expertId){
      this.expertId=this.$route.query.expertId
      this.isShowBtn = true
      this.getExpertData()
    }else{
      this.getExpertIdMsg()
      this.isShowBtn = false
    }
  },
  methods: {
    /** 获取专家id */
    getExpertIdMsg(){
      getExpertId().then(res =>{        
        if(res.code==200 && res.data.expertId ){
            this.expertId=res.data.expertId
            this.getExpertData()
        }else{
            this.expertId=this.$route.query.expertId
            this.getExpertData()
        }
      })
    },
    /** 获取专家详情 */ 
    getExpertData(){
      getExpert(this.expertId).then((response) => {
        // console.log("获取专家详情", response);
        this.queryParams = response.data;
        this.technicalTitles =response.data.technicalTitles
        this.qualifications =response.data.qualifications
        this.expertMessageVoList=response.data.expertMessageVoList
        if(response.data.averageScore){
          this.averageScore='任务得分（' + response.data.averageScore +'分）'
        }
      });
    },
    /** 格式化时间 */
    formatDate(val) {
      if(val){
        return val.substring(0, 10);
      }
    },
    /** 附件下载 */
    downloadFile(file) {
      if (file) {
        window.location.href = file.fileUrl;
      }
    },
    /** 返回按钮操作 */
    handBack() {
      // this.$router.push({
      //   path: "/tripartite/expert",
      // });
      this.$router.back()
    },
  },
};
</script>
<style scoped lang="scss">
.expert-title-outBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  .expert-title {
    font-weight: 500;
    font-size: 18px;
  }
  .back-btn {
    font-size: 14px;
    color: #333;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      position: relative;
      top: 2px;
    }
  }
}
.submit-outBox {
  width: 100%;
  text-align: center;
  .btn {
    width: 200px;
  }
}
.model-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebecef;
  border-top: 1px solid #ebecef;
  margin-bottom: 24px;
  margin-top: 24px;
  img {
    width: 16px;
    height: 16px;
    position: relative;
    right: 5px;
    top: 2px;
  }
}
</style>
<style lang="scss">
/*表单label不加粗  */
label {
  font-weight: normal !important;
}

.expert-container {
  /* el-descriptions-item 文字居中 */
  .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
    text-align: center;
  }
  /* 信息描述组件样式更改 */
  .descriptions-item-label {
    width: 266.67px;
  }
  .descriptions-item-content {
    // text-align: left !important;
    width: 266.67px;
  }
  .descriptions-content-width{
    width: 35%;
  }
  // 文件图标样式更改
  .files-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: relative;
    top: 4px;
  }
}
</style>
